<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: #f5f5f5;
            margin:0;
            }
            a{
                text-decoration: none;
            }
        .a{
            width:240px;
            height: 500px;
            background-color: #fff;
            margin:50px 0px 0px 50px;
            padding:10px 15px;/*内边距*/
}
        .a .a-title{
            height: 40px;
            /* background-color: aqua; */
            display: flex;
            align-items: center;
            border-bottom:1px solid #f9f9f9;
            /* cursor: pointer; */
            }
        .a .a-title .hot{
            flex-grow: 1;
            font-size:14px ;
            }
        .a .a-title span.sx{
            font-size: 12px;
            color:#939393;
            }
        .a .news{
           height: 40px;
           border-bottom:1px solid #ccc;
           font-size: 12px;
           display: flex;
      }
        .a .news a{
            width: 100%;
            /* background-color: rgb(248, 195, 245); */
            display: flex;
            align-items: center;
        }
            .a .news a span.title{
                flex-grow: 1;
            }
            .a .news a span.icon{
                margin-right:10px;
                font-weight: bold;
                color:#ff9406;
                font-size: 16px;
}
.a .news a span.title{
   color:#333;
}
.a .news  a span.num{
   color:#939393;
   margin:0px 5px;
   
}
.a .news .mark{
   background-color: #ff9406;
   padding:2px 4px;
   border-radius: 2px;
   color:#fff;
}
.a .news:nth-child(-n+5) a span.icon{
color:red;
}
    </style>
</head>
<body>
    <div class="a">
        <!--标题开始-->
        <div class="a-title">
            <span class="hot">微博热搜</span>
            <img src="icon-sx.png" alt="">
            <span class="sx">点击刷新</span>
        </div>
        <!-- 标题结束 -->
        <div class="news">
            <a href="">
                <span class="icon"><img src="icon_top.png" alt=""></span>
                <span class="title">3分钟了解未来之城雄安</span>
                <span class="mark bg1">新</span>
            </a>  
        </div>
        <!-- 每一条新闻样式 -->
        <div class="news">
            <a href="">
                <span class="icon">1</span>
                <span class="title">新的赶考之路考卷常出常新</span>
                <span class="num">246万</span>
                <div class="mark">新</div>
            </a>  
        </div>
        <div class="news">
            <a href="">
                <span class="icon">2</span>
                <span class="title">新的赶考之路考卷常出常新</span>
                <span class="num">246万</span>
                <div class="mark">新</div>
            </a>  
        </div>
        <div class="news">
            <a href="">
                <span class="icon">3</span>
                <span class="title">新的赶考之路考卷常出常新</span>
                <span class="num">246万</span>
                <div class="mark">新</div>
            </a>  
        </div>
        <div class="news">
            <a href="">
                <span class="icon">4</span>
                <span class="title">新的赶考之路考卷常出常新</span>
                <span class="num">246万</span>
                <div class="mark">新</div>
            </a>  
        </div>
        <div class="news">
            <a href="">
                <span class="icon">5</span>
                <span class="title">新的赶考之路考卷常出常新</span>
                <span class="num">246万</span>
                <div class="mark">新</div>
            </a>  
        </div>
        <div class="news">
            <a href="">
                <span class="icon">6</span>
                <span class="title">新的赶考之路考卷常出常新</span>
                <span class="num">246万</span>
                <div class="mark">新</div>
            </a>  
        </div>
        <div class="news">
            <a href="">
                <span class="icon">7</span>
                <span class="title">新的赶考之路考卷常出常新</span>
                <span class="num">246万</span>
                <div class="mark">新</div>
            </a>  
            
        </div>
        <div class="news">
            <a href="">
                <span class="icon">8</span>
                <span class="title">新的赶考之路考卷常出常新</span>
                <span class="num">246万</span>
                <div class="mark">新</div>
            </a>  
            
        </div>
    </div>
</body>
</html>